<template>
  <div>
    <el-autocomplete
        popper-class="my-autocomplete"
        v-model="input"
        :fetch-suggestions="querySearch"
        placeholder="请输入所查询活动ID或名称"
        @select="handleSelect"
        style="margin-left: 20px;margin-top: 20px"
    >
      <i
          class="el-icon-edit el-input__icon"
          slot="suffix"
          @click="handleIconClick">
      </i>
      <template slot-scope="{ item }">
        <div class="name">{{ item.value }}</div>
        <span class="addr">{{ "活动id:"+item.address }}</span>
      </template>
    </el-autocomplete>
    <el-button @click="getActInfo(input)">查询</el-button>
    <el-descriptions title="活动信息" :column="2" class="form" border>
      <el-descriptions-item label="活动名称" content-class-name="my-label">{{activity.aname}}</el-descriptions-item><br>
      <el-descriptions-item label="活动时间" content-class-name="my-label">{{activity.activityConStartTime}}--{{activity.activityConEndTime}}</el-descriptions-item><br>
      <el-descriptions-item label="活动举办学校" content-class-name="my-label">{{activity.school}}</el-descriptions-item><br>
      <el-descriptions-item label="活动类型" content-class-name="my-label">
        <template>
          <span v-if="activity.type==1" style="font-size: 15px;">线上活动</span>
          <span v-else-if="activity.type==2" style="font-size: 15px;">校内活动</span>
          <span v-else-if="activity.type==3" style="font-size: 15px;">校外活动</span>
        </template>
      </el-descriptions-item><br>
      <el-descriptions-item label="省份" content-class-name="my-label">{{activity.province}}</el-descriptions-item><br>
      <el-descriptions-item label="城市" content-class-name="my-label">{{activity.city}}</el-descriptions-item><br>
      <el-descriptions-item label="活动详情" content-class-name="my-label">{{activity.description}}</el-descriptions-item><br>
    </el-descriptions>
    <el-form :model="feekbackList" ref="feekbackList" label-width="100px" class="demo-ruleForm" border-radius:2px style="margin-top: 20px">
      <el-form-item label="反馈人ID" prop="name" v-if="false">
        <span>{{this.userId}}</span>
      </el-form-item>
      <el-form-item label="反馈人员" prop="name">
        <span>{{this.uname}}</span>
      </el-form-item>
      <el-form-item label="反馈账号" >
        <span>{{this.userAccount}}</span>
      </el-form-item>
      <el-form-item label="反馈内容" prop="description">
        <vue-editor v-model="feekbackList.description" style="width: 1000px"></vue-editor>
<!--          <el-input type="textarea" v-model="feekbackList.description" style="width: 500px"></el-input>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit(feekbackList)">立即上传</el-button>
        <el-popover
            placement="top"
            width="160"
            v-model="visible">
          <p>确认保存为草稿吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="submit1(feekbackList)">确定</el-button>
          </div>
          <el-button slot="reference">保存草稿</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import { VueEditor } from 'vue2-editor'
import {addFeekback, getAllActivity, getNameByUid, searchByAid, searchByName} from '../../../../api/feekback'
import {getRuleByAid, getRuleByName} from '../../../../api/rule'

export default {
  name: 'editfeekback',
  data () {
    return {
      result: '',
      input: '',
      feekbackList: {
        id: '',
        createTime: '',
        uid: '',
        description: '',
        status: 0,
        aid: ''
      },
      activity: {
        aname: '',
        activityConStartTime: '',
        activityConEndTime: '',
        school: '',
        province: '',
        city: '',
        type: '',
        description: ''
      },
      visible: false,
      allActivity: [],
      uname: ''
    }
  },
  methods: {
    getUid () {
      this.feekbackList.uid = this.userId
    },
    submit (feekbackList) {
      console.log(this.activity)
      if (this.activity.type === '' || this.activity.type === null) {
        this.$message({
          message: '警告，无对应活动，请重新查询',
          type: 'warning'
        })
      } else if (feekbackList.description === '' || feekbackList.description === null) {
        this.$message({
          message: '警告，未填写反馈内容',
          type: 'warning'
        })
      } else {
        addFeekback(feekbackList)
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      }
    },
    submit1 (feekbackList) {
      this.feekbackList.status = null
      this.feekbackList.status = 2
      addFeekback(feekbackList)
      this.visible = false
    },
    getActInfo (val) {
      if (isNaN(val)) {
        this.activity.activityConEndTime = null
        this.activity.activityConStartTime = null
        this.activity.description = null
        this.activity.province = null
        this.activity.city = null
        this.activity.school = null
        searchByName(val, this.userId).then((res) => {
          if (res == null) {
          } else {
            this.feekbackList.aid = res.id
            this.activity.aname = res.name
            this.activity.type = res.type
            this.activity.activityConStartTime = res.activityConStartTime.substring(0, 10)
            this.activity.activityConEndTime = res.activityConEndTime.substring(0, 10)
            this.activity.description = res.activityDescription
            getRuleByName(val).then((res) => {
              this.activity.province = res.province
              this.activity.city = res.city
              this.activity.school = res.schoolName
            })
          }
        })
      } else {
        this.activity.activityConEndTime = null
        this.activity.activityConStartTime = null
        this.activity.description = null
        this.activity.province = null
        this.activity.city = null
        this.activity.school = null
        let num = parseInt(val)
        searchByAid(num, this.userId).then((res) => {
          if (res == null) {
          } else {
            this.feekbackList.aid = res.id
            this.activity.aname = res.name
            this.activity.type = res.type
            this.activity.activityConStartTime = res.activityConStartTime.substring(0, 10)
            this.activity.activityConEndTime = res.activityConEndTime.substring(0, 10)
            this.activity.description = res.activityDescription
            getRuleByAid(num).then((res) => {
              this.activity.province = res.province
              this.activity.city = res.city
              this.activity.school = res.schoolName
            })
          }
        })
      }
    },
    getName () {
      getNameByUid(this.userId).then((res) => {
        this.uname = res
      })
    },
    getAllActByUid () {
      getAllActivity(this.userId).then((res) => {
        // console.log(res)
        // this.allActivity = res
        res.forEach((item) => {
          this.allActivity.push({address: item.id, value: item.name})
        })
        // console.log(this.allActivity)
      })
    },
    querySearch (queryString, callback) {
      var activities = this.allActivity
      var results = queryString ? activities.filter(this.createFilter(queryString)) : activities
      // 调用 callback 返回建议列表的数据
      callback(results)
    },
    createFilter (queryString) {
      return (activity) => {
        return (activity.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect (item) {
      console.log(item)
    },
    handleIconClick (ev) {
      console.log(ev)
    }
  },
  computed: {
    ...mapGetters({
      userType: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    }),
    roleName () {
      return this.getRoleName(this.userType)
    }
  },
  mounted () {
    this.getUid()
    this.getName()
    this.getAllActByUid()
  },
  components: {
    VueEditor
  }
}
</script>

<style>
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}

.form {
  margin-top: 20px;
  margin-left: 20px;
}
.input {
  margin-top: 20px;
  margin-left: 10px;
  width: 240px;
}
.my-label {
  background: #f3f5f9;
  width: 300px;
}
.el-descriptions-item__label.is-bordered-label {
  background: #f3f5f9;
}
.upload-my {
  width: 500px
}
.el-upload__text {
  width: 500px;
}
.el-upload-dragger {
  width: 500px;
}
.el-upload__tip {
  margin-top: -20px;
  margin-bottom: 5px;
}
.name {
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 15px;
  height: 25px;
}
.addr {
  font-size: 12px;
  color: #b4b4b4;
  display: block;
  height: 27px;
}
.highlighted .addr {
  color: #ddd;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
</style>
